<!--
 * @Author: your name
 * @Date: 2021-11-15 11:20:27
 * @LastEditTime: 2021-11-16 22:15:40
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \vue-antd-admin-yarn\src\components\permissionstree\index.vue
-->
<template>
  <div id="app">
    <!-- <div>123</div> -->
    <div class="font">
      <Tree
        ref="tree"
        :treeArray="TreeArray"
        :level="0"
        :pid="0"
        :openArray="arrayOpen"
        :column_id="column_id"
        :permission_id="permission_id"
        :mapping="mapping"
      >
      </Tree>
    </div>
  </div>
</template>
<script>
import Tree from "./Tree";
export default {
  name: "app",
  components: {
    Tree,
  },
  props: {
    TreeArray: Array, //树形数据
    checkedKeysProp: Array, //全部id
    column_id: Array, //旧选择的栏目id
    permission_id: Array, //旧选择的操作id
    mapping: {
        type: Object,
        default:()=> {
          return { name: "name"}
         }
    }, //字段映射
  },
  data() {
    return {
      arrayOpen: [],
      all: [],
    };
  },
  created() {
    // console.log(this.column_id);
    // console.log(this.permission_id);

    this.arrayOpen = JSON.parse(JSON.stringify(this.checkedKeysProp));
    this.all = JSON.parse(JSON.stringify(this.checkedKeysProp));
    // this.checkedKeys = JSON.parse(JSON.stringify(this.checkedKeysProp));
    //   console.log();
  }, //生命周期 - 创建完成（可以访问当前this实例）
  mounted() {}, //生命周期 - 挂载完成（可以访问DOM元素）
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  watch: {},
  methods: {
    open(id, isOpen) {
      //展开
      if (isOpen == -1) {
        this.arrayOpen.push(id);
      } else {
        this.arrayOpen.splice(isOpen, 1);
      }
    },
    // changBox(id, isChecked) {
    //选中
    // if (isChecked == -1) {
    //   this.checkedKeys.push(id);
    // } else {
    //   this.checkedKeys.splice(isChecked, 1);
    // }
    // },

    selAll() {
      this.$refs.tree.operationSon(true);
    },
    openAll() {
      this.arrayOpen = JSON.parse(JSON.stringify(this.all));
    },
    closeAll() {
      this.arrayOpen = [];
    },
    clearAll() {
      this.$refs.tree.operationSon(false);
      // this.checkedKeys = []
    },
    getData() {
      return this.$refs.tree.getData();
      // console.log(123);
    },
    getOperation() {
      return this.$refs.tree.getOperation();
    },
  },
};
</script>
<style lang="less" scoped>
#app {
  width: 100%;
  overflow: auto;
  white-space: nowrap;
}

.font {
  // border: 1px solid red;
  font: 15px Helvetica Neue, Helvetica, PingFang SC, Tahoma, Arial, sans-serif;
  line-height: 30px;
  margin-bottom: 20px;
}
</style>
